<template>
  <div class="footer-container">
    <div class="footer" ref="footer">
      <div class="device-warning">
        <div class="title">
          <div class="title-text">
            设备预警&设备报警
          </div>
        </div>
        <div class="warn-count">
          <div class="serious-count">
            <span class="serious-color serious-icon">
              <Icon type="ios-notifications" color="#B34D4D" />
            </span>
            <span>严重警报：</span>
            <span class="serious-count-text">{{ countMsg.serious }}</span>
            <span>条</span>
          </div>
          <div class="general-count">
            <span class="general-color general-icon">
              <Icon type="ios-notifications" color="#E4A430" />
            </span>
            <span>一般警报：</span>
            <span class="general-count-text">{{ countMsg.normal }}</span>
            <span>条</span>
          </div>
        </div>
        <div class="warn-list">
           <div class="list-head">
            <div class="head-date">时间</div>
            <div class="head-position">位置</div>
            <div class="head-situation">故障情况</div>
           </div>
           <div class="list-body">
            <div class="list-item" v-for="(item, idx) in warnData" :key="idx">
              <div><Icon type="md-alert" color="#FF9C41" /></div>
              <div class="white">{{item.date}}</div>
              <div class="blue">{{item.position}}</div>
              <div class="white">{{item.situation}}</div>
            </div>
           </div>
        </div>
      </div>
      <div class="energy-consumption-statistics">
        <div class="title">
          <div class="title-text">
            生产能耗统计(kwh)
          </div>
        </div>
        <div class="energy-chart">
          <div ref="chart" class="chart-container"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Tcmd } from './command'
import { Component, Vue } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { Tsrv } from '@/services';

@Component  
export default class Footer extends Vue {
  private chart: echarts.ECharts | null = null;

  private footer: HTMLElement | null = null;

  private timer: any = null;

  private isRunning: boolean = false

  private countMsg: any = {
      serious: 0,
      // general: 0
      normal: 0
  }

  private energyStats: Array<any> = [
    // {
    //   t: '2019-01-01',
    //   d: 30,
    //   w: 60,
    //   m: 90,
    //   q: 120
    // },
    // {
    //   t: '2019-01-02',
    //   d: 35,
    //   w: 65,
    //   m: 90,
    //   q: 120
    // },
    // {
    //   t: '2019-01-03',
    //   d: 40,
    //   w: 50,
    //   m: 90,
    //   q: 120
    // },
    // {
    //   t: '2019-01-04',
    //   d: 45,
    //   w: 70,
    //   m: 90,
    //   q: 120
    // },
    // {
    //   t: '2019-01-05',
    //   d: 50,
    //   w: 75,
    //   m: 90,
    //   q: 120
    // }
  ]

  
  private warnData: Array<any> = [
      // {
      //     date: '2019-01-01',
      //     position: '1#产线001号行车',
      //     situation: '位置垂直方向运行故障'
      // },
      // {
      //     date: '2019-01-02',
      //     position: '5#产线005号行车',
      //     situation: '位置垂直方向运行故障'
      // }
  ]

  mounted() {
    this.initChart();
    this.getEnergyStatsInfo();
    this.getAlertInfo();
    this.startTimer(60000);
 
    setTimeout(() => {
      const erd = this.$elementDetecter();
      this.footer = this.$refs.footer as HTMLElement;
      erd.listenTo(this.footer, (el: any) => {
        this.reframe(el);
      });
    }, 0);
  }

  private initChart() {
    const chartDom = this.$refs.chart as HTMLElement;
    this.chart = echarts.init(chartDom, 'dark');
    return new Promise((resolve, reject)=> {
      const option = {
        title: {
          text: '能耗统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: 100,
          top: 20,
          data: ['日', '周', '月', '季度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            myTool1: {
              show: true,
              title: '刷新',
              icon: 'path://M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z',
              onclick: this.getEnergyStatsInfo
            },
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: this.energyStats.map((item: any)=> {return item.t;})
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '日',
            type: 'line',
            stack: 'Total',
            // data: [120, 132, 101, 134, 90, 230, 210]
            data: this.energyStats.map((item: any)=> {return item.d;})
          },
          {
            name: '周',
            type: 'line',
            stack: 'Total',
            // data: [220, 182, 191, 234, 290, 330, 310]
            data: this.energyStats.map((item: any)=> {return item.w;})
          },
          {
            name: '月',
            type: 'line',
            stack: 'Total',
            // data: [150, 232, 201, 154, 190, 330, 410]
            data: this.energyStats.map((item: any)=> {return item.m;})
          },
          {
            name: '季度',
            type: 'line',
            stack: 'Total',
            // data: [320, 332, 301, 334, 390, 330, 320]
            data: this.energyStats.map((item: any)=> {return item.q;})
          }
        ]
      };
      this.chart.setOption(option);
    })
  }

  private getEnergyStatsInfo(): Promise<boolean> {
    return new Promise((resolve, reject)=> {
      const param = {
        type: 'svcLogic',
        cmd: 'sw_production_energy_consumption',
        userInfo: {},
        funInfo: {},
        data: {}
      }

      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          const d = data?.energyStats;
          if (!Tsrv.noValue(d)) {
            const energyStats = d?.data;
            if (!Tsrv.noValue(energyStats)) {
              this.energyStats = energyStats;
              resolve(true);
              this.initChart();
            }
          }
        } else {
          this.$Message.error(msg);
          resolve(false);
        }
      }).catch(err=> {
        this.$Message.error(`${err}`);
      });
    })
  }

  private getAlertInfo(): Promise<boolean> {
    return new Promise((resolve, reject)=> {
      const param = {
        type: 'svcLogic',
        cmd: 'sw_equipment_warning',
        userInfo: {},
        funInfo: {},
        data: {}
      }

      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          const d = data?.deviceSituation;
          if (!Tsrv.noValue(d)) {
            this.warnData = d?.info;
            const count = d?.count;
            if (!Tsrv.noValue(count?.serious)) {
              this.countMsg.serious = count.serious;
            }
            if (!Tsrv.noValue(count?.normal)) {
              this.countMsg.normal = count.normal;
            }
          }
          resolve(true);
        } else {
          this.$Message.error(msg);
          resolve(false);
        }
      }).catch(err=> {
        this.$Message.error(`${err}`);
      });
    })
  }

  private startTimer(time: number = 3000) {
    if (!this.isRunning) {
      this.isRunning = true
      this.timer = setInterval(() => {
        this.getAlertInfo();
      }, time)
    }
  }

  private pauseTimer() {
    if (this.isRunning && !Tsrv.noValue(this.timer)) {
      clearInterval(this.timer)
      this.isRunning = false
    }
  }

  private reframe(el?: HTMLElement) {
    this.chart.resize();
  }


  beforeDestroy() {
    this.pauseTimer();
    // 销毁图表实例，释放资源
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-container {
  width: 100%;
  height: 100%;
  .footer {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 9fr 11fr;
    grid-template-rows: 1fr;

    .device-warning {
      height: 100%;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 30px 1fr 3fr;
      overflow: hidden;
      .title {
        height: 30px;

        .title-text {
          height: 100%;
          line-height: 30px;
          font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
          font-weight: normal;
          font-size: 17px;
          color: #EAEFF5;
          text-shadow: 0px 2px 3px rgba(35,142,232,0.54);
          text-align: left;
          font-style: normal;
          margin: 0 10px;
          border-bottom: 3px solid #0CA2E0;
        }
      }
      .warn-count {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;

        .serious-color {
          color: #E02020;
        }
        .general-color {
          color: #E4A430;
        }
        .serious-count {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          border-bottom: 4px solid #B34D4D;
          margin: 0 10px;
          
          span {
            font-family: PingFangSC, PingFang SC;
            color: #FDFFFF;
            text-align: left;
            font-style: normal;
          }
          .serious-icon {
            height: 24px;
            width: 24px;
            border: 1px solid #efaeae;
            background-color: #ea9898;
            margin-right: 5px;
          }
          .serious-count-text {
            font-family: D, D;
            font-weight: normal;
            font-size: 22px;
            color: #E02020;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            margin-right: 5px;
          }
        }
        .general-count {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          border-bottom: 4px solid #B38A4D;
          margin: 0 10px;
          span {
            font-family: PingFangSC, PingFang SC;
            color: #FDFFFF;
            text-align: left;
            font-style: normal;
          }
          .general-icon {
            height: 24px;
            width: 24px;
            border: 1px solid #ecce96;
            background-color: #ddc18d;
            margin-right: 5px;
          }
          .general-count-text {
            font-family: D, D;
            font-weight: normal;
            font-size: 22px;
            color: #E4A430;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            margin-right: 5px;
          }
        }
      }
      .warn-list {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        padding: 5px 3px 5px 10px;

        .white {
          color: #FDFFFF;
        }

        .blue {
          color: #41ECFD;
        }

        .list-head {
          height: 30px;
          display: grid;
          grid-template-columns: 1fr 3fr 4fr 5fr;
          grid-template-areas:
          ". head-date  head-position head-situation";
          justify-items: center;
          align-items: center;
          
          div {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #FDFFFF;
            text-align: center;
            font-style: normal;
          }

          .head-date {
            grid-area: head-date;
          }
          .head-position {
            grid-area: head-position;
          }
          .head-situation {
            grid-area: head-situation;
          }
        }
        .list-body {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          padding: 10px 0;

          overflow: auto;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 6px;
            background: #f5f5f5;
            border-radius: 6px;
          }

          &::-webkit-scrollbar-track-piece {
            background: #fff;
            border-radius: 6px;
          }

          &::-webkit-scrollbar-thumb {
            background: #b1b1b1;
            border-radius: 6px;
          }

          .list-item {
            width: 100%;
            height: 30px;
            background: rgba(3,135,219,0.25);
            border-radius: 15px;
            border: 1px solid #02D9DB;
            flex-shrink: 0; /* 防止flex布局压缩高度 */
            box-sizing: border-box; /* 确保padding不影响高度计算 */
            display: grid;
            grid-template-columns: 1fr 3fr 4fr 5fr;
            grid-template-rows: 1fr;
            // grid-template-areas:
            // ". head-date  head-position head-situation";
            justify-items: center;
            align-items: center;

            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FDFFFF;
            text-align: left;
            font-style: normal;

            padding: 0 5px;
          }
          .list-item + .list-item {
            margin-top: 10px;
          }
        }
      }
    }
    .energy-consumption-statistics {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title {
        height: 30px;
        
        .title-text {
          height: 100%;
          line-height: 30px;
          font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
          font-weight: normal;
          font-size: 17px;
          color: #EAEFF5;
          text-shadow: 0px 2px 3px rgba(35,142,232,0.54);
          text-align: left;
          font-style: normal;
          margin-left: 10px;
          border-bottom: 3px solid #0CA2E0;
        }
      }
      .energy-chart {
        flex: 1;
        .chart-container {
          height: 100%;
          width: 100%;
        }
      }
    }
  }                                     
}
</style>
